<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="renderer" content="webkit" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="shortcut icon" href="" />
    <link rel="icon" href="" type="image/png" />
    <title>专业荟萃</title>
    <link href="css/normalize.min.css" rel="stylesheet" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <link rel="stylesheet" href="css/style.css" />
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="app" v-cloak>
      <!--头部导航栏-->
      <header>
        <div class="logo">
          <img src="./images/logo.png" alt="" />
          <span>管理科学与房地产学院</span>
        </div>

        <nav class="menu-container">
          <ul class="wrapper">
            <li><a href="./course_overview.html">学院简介</a></li>
            <li><a href="./redm.html">房地产开发与管理</a></li>
            <li class="on"><a href="./list.html">专业荟萃</a></li>
            <li><a href="./course_map.html">课程地图</a></li>
          </ul>
        </nav>
      </header>
      <!--//头部导航栏-->

      <!-- <pre>{{pro_gr}}</pre> -->
      <!-- <pre>{{courseIds}}</pre> -->

      <section class="map-container">
        <div class="wrapper">
          <div class="tit-group">
            <i class="icon-map"></i>
            <span>专业荟萃</span>
          </div>

          <!-- 主体部分 -->
          <div class="main-body list-body">
            <div class="list-item" v-for="item in list" :key="item.id">
              <el-card shadow="hover">
                <div slot="header" class="clearfix">
                  <span>{{item.title.rendered}}</span>
                  <el-link
                    style="float: right; padding: 3px 0"
                    type="primary"
                    target="_blank"
                    :href="`./course_map.html?id=${item.id}`">
                    课程地图
                  </el-link>
                </div>
                <el-image :src="item.pro_image" fit="cover">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>

                <div class="item-box">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <div>
                        <el-statistic
                          group-separator=","
                          :precision="0"
                          :value="getValue(item,'acf.pro_gr.length')"
                          title="毕业要求"></el-statistic>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div>
                        <el-statistic
                          group-separator=","
                          :precision="0"
                          :value="getValue(item,'acf.pro_goal.length')"
                          title="培养目标">
                        </el-statistic>
                      </div>
                    </el-col>
                  </el-row>
                </div>

                <div class="item-footer">
                  <el-link type="primary" target="_blank" :href="`./redm.html?id=${item.id}`"> 专业详情 </el-link>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </section>

      <!--底部-->
      <footer>
        <div class="wrapper">
          <div class="copyright">管理科学与房地产学院 版权所有</div>
          <div class="tip">建议使用IE8及以上版本或其他高版本浏览器，屏幕分辨率在1366*768及以上的客户端访问</div>
        </div>
      </footer>
    </div>
  </body>

  <!--//底部-->
  <script src="./js/vue.min.js"></script>
  <script src="./js/lodash.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    function getUrlParams(param) {
      const urlParams = new URLSearchParams(window.location.search)
      return urlParams.get(param) || ''
    }

    var app = new Vue({
      el: '#app',
      data() {
        return {
          list: [],
        }
      },
      computed: {},
      mounted() {
        this.fetchList()
      },
      methods: {
        fetchList() {
          fetch(`https://api.kejianxin.com/wp-json/wp/v2/profession`)
            .then((res) => {
              return res.json()
            })
            .then((data) => {
              this.list = data || {}
            })
        },

        getValue(obj, key) {
          return _.get(obj, key, 0) || 0
        },
      },
    })
  </script>
</html>
